import React, { useCallback, useRef } from "react";
import { Button } from "antd";
import { toPng } from "html-to-image";

type props = {
  myRef: React.RefObject<HTMLDivElement>;
};

export default ({ myRef }: props) => {
  // const ref = useRef<HTMLDivElement>(null);

  const onButtonClick = useCallback(() => {
    if (myRef.current === null) {
      return;
    }

    toPng(myRef.current, { cacheBust: true })
      .then((dataUrl) => {
        const link = document.createElement("a");
        link.download = "my-image-name.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((error) => {
        console.error(error);
      });
  }, [myRef]);

  return (
    <>
      {/* <div ref={ref}>showme,soo</div> */}
      <Button onClick={onButtonClick}>通过html-to-image 生成图片</Button>
    </>
  );
};
